<template>
	<view class='tab2'>
		<view class="head">
			<image class='classify-img' @click='goClassify' src="@/static/classify/classify.png"></image>
			<view class='search'>
				<search-view></search-view>
			</view>
		</view>
		<ul>
			<li @click='handleNav(index)' :class="noIndex == index ? 'active':''" v-for='(item,index) in navList' :key='index'>
				{{ item }}
			</li>
			<li @click='handleSelect'>筛选<image class='img' src="@/static/classify/select.png"></image></li>
		</ul>
		<view class="modal" v-if='isShowModal == false ? false:true'>
			<view class="modal-modal" @click='handleModal'></view>
			<view class='modal-content'>
				<p>输入价格区间</p>
				<input type="text" v-model='form_low' value="from_low" placeholder="最低价格"/>-<input type="text" v-model='form_high' value="from_high" placeholder="最高价格"/>
			  <button @click='resetPrice'>重置</button>
				<button @click='handlePrice'>确定</button>
			</view>
		</view>
		<!-- 搜索结果显示区域 -->
		<span class='search-result' v-if="searchResult.length == 0 ? false:true">已为您找到{{ searchResult.length }}条结果：</span>
		<card-item :cardList="searchResult.length == 0 ? currentData:searchResult"></card-item>
	</view>
</template>

<script>
	import searchView from '@/components/search.vue'
	import cardItem from '@/components/cardItem.vue'
	export default {
    components:{
			searchView,
			cardItem
		},
		data(){
			return{
				noIndex: 0,
				navList: [
					'全部','销量','价格','浏览','收藏'
				],
				searchResult: [],
				form_low: '',
				form_high: '',
				isShowModal: false,
				currentData: []
			}
		},
		onShareAppMessage(res){
			if (res.from === 'menu') {
				return {
					title: '大地智慧点餐服务',
					path: '/pages/tab2/tab2',
					imageUrl: 'https://img0.baidu.com/it/u=3874923968,3682303970&fm=224&fmt=auto&gp=0.jpg'
				}
			}
		},
		onLoad() {
			uni.$on('sendSearch', data=>{
				this.searchResult = data
			})
			this.currentData = this.$store.state.a.allData
		},
		onUnload() {
			uni.$off('sendSearch')
		},
		methods:{
			// 打开商品分类页
			goClassify(){
				uni.navigateTo({
					url: '/pages/tab2/classify'
				})
			},
			// 关闭改变价格区间弹框
			handleModal(){
				this.isShowModal = false
			},
			// 筛选价格
			handleSelect(){
				this.isShowModal = true
			},
			// 改变价格区间
			handlePrice(){
				if(this.form_high == '' && this.form_low == ''){
					uni.showToast({
						title:'价格不能为空'
					})
				}else{
					let newData = []
					this.currentData.map(item=>{
						if(this.form_high >= item.price && item.price >= this.form_low){
							newData.push(item)
						}
					})
					this.isShowModal = false
					this.searchResult = newData
				}
			},
			resetPrice(){
				this.form_high = ''
				this.form_low = ''
			},
			// 封装的排序函数
			compare(property){
				return (a,b)=>{
					return b[property] - a[property]
				}
			},
			// 切换类型
			handleNav(index){
				this.noIndex = index
				if(index == 1){
					if(this.searchResult.length == 0){
						this.currentData.sort(this.compare('sellNum'))
					}else{
						this.searchResult.sort(this.compare('sellNum'))
					}
				}else if(index == 2){
					if(this.searchResult.length == 0){
						this.currentData.sort(this.compare('price'))
					}else{
						this.searchResult.sort(this.compare('price'))
					}
				}else if(index == 3){
					if(this.searchResult.length == 0){
						this.currentData.sort(this.compare('search'))
					}else{
						this.searchResult.sort(this.compare('search'))
					}
				}else if(index == 4){
					if(this.searchResult.length == 0){
						this.currentData.sort(this.compare('collect'))
					}else{
						this.searchResult.sort(this.compare('collect'))
					}
				}else{
					uni.navigateTo({
						url: '/pages/tab2/classify'
					})
				}
			}
		}
	}
</script>

<style lang='scss'>
.tab2{
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	background-image: linear-gradient(to right bottom,#FFFFFF,#F0F8FF);
	.head{
		width: 95%;
		height: 70rpx;
		padding-top: 20rpx;
		margin-left: 2.5%;
		display: flex;
		align-items: center;
		.classify-img{
			width: 60rpx;
			height: 60rpx;
		}
		.search{
			width: calc(100% - 70rpx);
			height: 100%;
			padding-left: 10rpx;
		}
	}
	.active{
		color: #1E90FF !important;
	}
	ul{
		padding: 0;
		width: 95%;
		margin-left: 2.5%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid rgba(176,196,222,0.2);
		li{
			flex: 1;
			align-items: center;
			color: #5E5E5E;
		}
		li:last-child{
			display: flex;
			align-items: center;
			.img{
				width: 33rpx;
				height: 33rpx;
			}
		}
	}
	.search-result{
		width: 95%;
		margin-left: 2.5%;
		font-size: 28rpx;
		color: #999999;
	}
	.modal{
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.5);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		display: flex;
		.modal-modal{
			width: 50%;
			height: 100%;
		}
		.modal-content{
			width: 50%;
			height: 100%;
			background-color: white;
			box-sizing: border-box;
			padding: 20rpx;
			input{
				border: 1px solid rgba(63,83,110,.3);
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 10rpx;
				color: #555555;
			}
			input:first-of-type{
				margin-top: 60rpx;
			}
			button{
				margin-top: 60rpx;
			}
			button:first-of-type{
				color: black;
				background-color: white;
			}
			button:last-of-type{
				color: white;
				background-color: #DD2222;
			}
		}
	}
}
</style>
